<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- <label for=""></label> -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 需求: <div>动态的展示用户名</div>
      // 在jsx中动态的插入数据,使用插值表达式 {}
      
      // 1. 插值表达式里面可以写什么  可以写任何js表达式
      // 任何一段代码,只要有结果就是表达式
      // 变量,常量,字面量,运算,函数
      // 语句不可以传入插值表达式: 分支语句,循环语句,声明语句
      // 2. 插值表达式可以写在哪里
      // 2.1 标签的子节点 (就是为了渲染)
      // 2.2 标签的属性的值的位置 (是为了控制属性)
      const username = 'lt'
      // const div = <div>{username}</div>
      // const div = <div>{1}</div>
      // const div = <div>{'123'}</div>
      // const div = <div>{true}</div> // 注意: 渲染布尔值,没有任何意义,所以页面不展示
      // const div = (
      //   <div>
      //     {/* 这是jsx里面的注释*/}
      //     {/* 如果渲染一个数组,则会将数组中的每一项当做一个子节点渲染出来*/}
      //     <p>{[1, 2, 3]}</p>
      //     <p>{'123'}</p>
      //   </div>
      // )
      // 注意: 渲染普通对象没有任何意义,react会报错
      // const div = <div>{{ name: 'lt', info: 'lsp' }}</div>
      // const div = <div>{1 + 1}</div>
      // 注意: 插值表达式中可以传入函数,但是不会渲染,并且会警告
      // const div = <div>{function () {}}</div>
      // const div = <button disabled={false}>按钮</button>
      const div = (
        // 插入行内样式,通过style,值必须是一个普通对象
        // 注意点: 1. 所有有-的属性,全部改为小驼峰
        //         2. 如果单位是px,则可以忽略单位. 其他单位不能忽略,正常写字符串
        <button style={{ color: 'green', backgroundColor: 'red', width: 100 }}>
          按钮
        </button>
      )

      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
